<template>
  <d2-container>
    <div class="d2-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>我的信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <h2>园区&企业信息</h2>
    <el-row :gutter="20" class="num-block">
      <el-col :span="6">
        <div class="grid-content">
          <p>园区总数</p>
          <h4>{{ myData.gardenNum || "0" }}</h4>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <p>园区企业总数</p>
          <h4>{{ myData.enterNum || "0" }}</h4>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <p>历史园区新增成交总额</p>
          <h4>{{ myData.gardenAmount || "0" }}</h4>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <p>历史园区成交分润总额</p>
          <h4>{{ myData.profitAmount || "0" }}</h4>
        </div>
      </el-col>
    </el-row>

    <el-form
      label-width="100px"
      :model="userInfo"
      :rules="rules"
      ref="add"
      label-position="top"
    >
      <el-card style="margin: 20px 0">
        <div class="title-box">个人信息</div>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="加盟商名称">
              <el-input
                type="text"
                v-model.trim="userInfo.franchName"
                style="width: 80%"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="加盟商No">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="userInfo.userId"
                style="width: 80%"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="加盟商联系人">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="userInfo.contactPerson"
                style="width: 80%"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 2 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="加盟商联系方式">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="userInfo.phone"
                style="width: 80%"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备用联系方式">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="userInfo.phoneBack"
                style="width: 80%"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="加盟商等级">
              <el-select v-model="userInfo.leval" disabled style="width: 80%">
                <el-option label="白金" :value="0"></el-option>
                <el-option label="钻石" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="margin: 20px 0">
        <div class="title-box">登陆信息</div>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="登录账号">
              <el-input
                type="text"
                v-model.trim="userInfo.userName"
                style="width: 80%"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登录密码">
              <el-input
                placeholder="请输入"
                type="password"
                value="111111"
                style="width: 80%"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8"> </el-col>
        </el-row>
        <div class="flex-center">
          <el-button type="primary" @click="dialogVisible = true"
            >修改密码</el-button
          >
        </div>
      </el-card>
    </el-form>
    <!-- 新增弹窗 -->
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      width="400px"
      class="dialog-box"
    >
      <el-form label-width="100px" :model="query" :rules="rules" ref="add">
        <el-form-item
          label="原密码"
          prop="oldPwd"
          :rules="[{ required: true, message: '字段不能为空' }]"
        >
          <el-input v-model="query.oldPwd" style="width: 240px"></el-input>
        </el-form-item>
        <el-form-item
          label="新密码"
          prop="newPwd"
          :rules="[{ required: true, message: '字段不能为空' }]"
        >
          <el-input v-model="query.newPwd" style="width: 240px"></el-input>
        </el-form-item>
        <el-form-item
          label="确认密码"
          prop="newPwd1"
          :rules="[{ required: true, message: '字段不能为空' }]"
        >
          <el-input v-model="query.newPwd1" style="width: 240px"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      myData:{},
      userInfo: {},
      dialogVisible: false,
      rules: {},
      query: {},
    };
  },
  methods: {
    getInfo() {
      let userId = localStorage.getItem("userId");
      this.$axios.post("/sysFranchise/getInfo", { userId }).then((result) => {
        console.log("响应", result);
        if (result) {
          this.userInfo = result.data;
        } else {
          this.$message.error(result.data.msg);
        }
      });
      this.$axios.post("/sysGardenGrant/myDataList",{}).then((result) => {
        console.log("响应", result);
        if (result) {
          this.myData = result.data;
        } else {
          this.$message.error(result.data.msg);
        }
      });
    },
    update() {
      this.$refs["add"].validate((valid) => {
        if (valid) {
          let params = {
            ...this.query,
            id: this.userInfo.id,
          };
          console.log("提交内容：", params);
          this.$axios.post("/sysFranchise/updatePwd", params).then((result) => {
            console.log("响应", result);
            if (result.code == 200) {
              this.$message.success("操作成功");
              this.$refs["add"].resetFields();
              this.dialogVisible = false;
            } else {
              if (result.data.msg.indexOf("OldPwd") != -1) {
                this.$message.error("原密码不正确");
              } else {
                this.$message.error(result.data.msg);
              }
            }
          });
        } else {
          return false;
        }
      });
    },
  },
  created() {
    this.getInfo();
  },
};
</script>

<style scoped lang="scss">
.num-block {
  text-align: center;
  background: #f3f3f3;
  border-radius: 2px;
  margin-bottom: 25px;
  color: #666;
  .el-col {
    font-size: 20px;
    .grid-content {
      border-left: 1px dashed #c1c1c1;
      position: relative;
      .position-box {
        position: absolute;
        right: 30px;
      }
    }
    &:nth-of-type(1) {
      color: #409eff;
      .grid-content {
        border-left: 0;
      }
    }
    &:nth-of-type(2) {
      color: #67c23a;
    }
    &:nth-of-type(3) {
      color: #909399;
    }
    &:nth-of-type(4) {
      color: #f56c6c;
    }
  }
}
.title {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #dce2eb;
  align-items: center;
  margin: 10px 0;
  border-radius: 4px;
}
</style>
